<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery练习</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <script>
        $(function (){
            //给全选绑定单击事件
            $("#checkedAllBtn").click(() => {
                $(":checkbox").prop("checked" , true);
            });

            //给全不选绑定单击事件
            $("#checkedNoBtn").click(() => {
                $(":checkbox").prop("checked" , false);
            });

            //反选单击事件
            $("#checkedRevBtn").click(() => {
                //查询全部球类的复选框
                $(":checkbox[name='items']").each((e,d) => {
                    $(d).prop("checked" , !$(d).prop("checked"))
                });

                //要检查是否选满
                //获取全部球类的个数
                var allCount = $(":checkbox[name='items']").length;
                //再获取选中球类的个数
                var checkedCount = $(":checkbox[name='items']:checked").length;

                //如果选中的球类的个数 == 所有的球类的个数  那么就代表全部选中了,那么就要进行全部选中的选项选中
                // if(allCount == checkedCount){
                //     $("#checkedAllBox").prop("checked" , true);
                // }else{
                //     $("#checkedAllBox").prop("checked" , false);
                // }

                $("#checkedAllBox").prop("checked" , allCount == checkedCount);
            });

            //[提交]按钮单击事件
            $("#sendBtn").click(() => {
                //获取选中的球类的复选框
                $(":checkbox[name='items']:checked").each((i,e) => {
                    // alert(e.value);
                    alert($(e).val());
                });
            });

            //给全选/全不选 绑定单击事件
            $("#checkedAllBox").click(() => {
                $(":checkbox[name='items']").prop("checked" ,  $("#checkedAllBox").prop("checked"));
            });

            //给全部球类绑定点击事件
            $(":checkbox[name='items']").click(() => {
                //要检查是否选满
                //获取全部球类的个数
                var allCount = $(":checkbox[name='items']").length;
                //再获取选中的球类的个数
                var checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked" , allCount == checkedCount);
            });



        })

    </script>
</head>
<body>
<p id="text_show">

</p>


<div class="look_source_code" onclick="getPageContent()">查看源码</div>

<form method="post" action="">
    你爱好的运动是?
    <input type="checkbox" id="checkedAllBox" />全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全选">
    <input type="button" id="checkedNoBtn" value="全不选">
    <input type="button" id="checkedRevBtn" value="反选">
    <input type="button" id="sendBtn" value="提交">



</form>

</body>
</html>